<template>
  <el-container style="height: 100vh;">
    <el-header style="text-align: right; font-size: 12px">
      <div class="logo-box">
        <img src="./assets/images/logo.png" alt="logo">
      </div>
      <el-row class="tool">
        <el-col :span="2" :offset="13"><i class="iconfont icon-user"></i><span>王小虎</span></el-col>
        <el-col :span="2"><i class="el-icon-setting"></i><span>设置</span></el-col>
        <el-col :span="2"><i class="iconfont icon-Logout"></i><span>退出</span></el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-openeds="[]" :unique-opened=true>
          <el-submenu index="1">
            <template slot="title" style="color: #fff;">
              <i class="el-icon-message"></i>
              <span slot="title">销量</span>
              </template>
              <router-link to='/sale' tag="div">
                <el-menu-item index="1-1">行业概况</el-menu-item>
              </router-link>
              <router-link to='/brand' tag="div">
                <el-menu-item index="1-2">品牌与厂商</el-menu-item>
              </router-link>
          </el-submenu> 
          <router-link to='/price' tag="div">
            <el-menu-item index="2">
              <i class="el-icon-star-on"></i>
              <span slot="title">价格优惠</span>
            </el-menu-item>
          </router-link>
          <router-link to='/no_price' tag="div">
            <el-menu-item index="3">
              <i class="el-icon-star-off"></i>
              <span slot="title">非价格优惠</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="4">
            <template slot="title" style="color: #fff;">
              <i class="el-icon-menu"></i>
              <span slot="title">vioce</span>
              </template>
              <router-link to='/vioce' tag="div">
                <el-menu-item index="4-1">网络热度</el-menu-item>
              </router-link>
              <!-- <router-link to='/opinions' tag="div">
                <el-menu-item index="4-2">口碑分析</el-menu-item>
              </router-link> -->
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container style="background: #f5f5f5">
        <el-main>
          <!-- 增加视图 -->
          <router-view @vioce="change"></router-view>
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<style lang="scss">
.el-submenu__title{
  color: #fff;
  &:hover{
    background: #2bba8f;
  }
  i{
    color: #fff;
  }
}
.el-menu-item{
  color: #fff;
  &:hover{
    background: #2bba8f!important;
  }
  &.is-active{
    background: #2bba8f!important;
  }
  i{
    color: #fff;
  }
}
.el-menu{
  background: none;
}

</style>
<style scoped lang="scss">
  @import './assets/css/iconfont.css';
  .el-header{
    background: {
      color: #181c37;
      image: url(./assets/images/header.jpg);
    }
    .logo-box{
      float: left;
      width: 200px;
      padding-top: 14px;
      img{
        width: 100%;
      }
    }
    .tool{
      color: #fff;
      font-size: 16px;
      line-height: 60px;
      .el-col-2{
        cursor: pointer;
        i{
          margin-right: 10px;
          &.el-icon-setting{
            font-size: 18px;
            position: relative;
            top: 1px;
          }
        }
      }
    }
  }
  .el-aside{
    background: {
      color: #181c37;
      image: url(./assets/images/side.jpg);
    };
    height: 100vh;
    margin-bottom: -60px;
    ul, li{
      background: none;
      color: #fff;
    }
  }
</style>


<script>
  export default {
    data() {
      return {
        vioce: []
      }
    },
    methods: {
      change(arr){
        this.vioce = arr;
        console.log('this.voice: ', this.vioce);
      }
    }
  };
</script>